<template>
  <Header :title="'购物车'" />
  <div class="cart" v-if="cartList.length">
    <div class="cart_list">
      <van-checkbox-group v-model="result" @change="singleChange">
        <van-skeleton avatar="" title :row="3" :loading="loading" style="width: 100%">
          <van-swipe-cell v-for="item in cartList" :key="item.shop_id">
            <van-checkbox :name="item.shop_id" />
            <van-card
              :price="item.shop_price"
              :desc="item.shop_dec"
              :title="item.shop_name"
              class="goods-card"
              :thumb="item.shop_img"
            >
              <template #footer>
                <van-stepper
                  v-model="item.shop_count"
                  min="1"
                  max="5"
                  :name="item.shop_id"
                  @change="changeCount"
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                :name="item.shop_id"
                type="danger"
                text="删除"
                @click="deleteShop(item.shop_id)"
                style="height: 100%; margin-left: 1px"
              />
            </template>
          </van-swipe-cell>
        </van-skeleton>
      </van-checkbox-group>
    </div>
    <div class="cart_submit">
      <van-submit-bar
        style="margin-bottom: 50px"
        :price="price"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checkAll" @change="allChange">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
  <EmptyCart v-else></EmptyCart>
</template>
<script setup>
import EmptyCart from "@/components/EmptyCart.vue";
import Header from "@/components/SHeader.vue";
import { onMounted, ref, computed } from "vue";
import { getCart, modifyCount, deleteCart, orderSubmit } from "@/api/cart";
import { useRouter } from "vue-router";
// import { closeToast } from "vant";
import { toast, close } from "@/util/toast";
const router = useRouter();
//购物车数据
const cartList = ref([]);
//复选框
const result = ref([]);
const checkAll = ref(true);
const getCartList = async () => {
  toast("loading", "数据加载中...", 10000);
  const token = 15;
  const { data } = await getCart(token);
  result.value = data.res.map((item) => item.shop_id);
  cartList.value = data.res;
  close();
};
// 单选
const singleChange = (e) => {
  console.log(result.value);
  checkAll.value = result.value.length === cartList.value.length ? true : false;
};
// 全选
const allChange = () => {
  if (!checkAll.value) {
    result.value = [];
  } else {
    result.value = cartList.value.map((item) => item.shop_id);
  }
};
//计算价格
const price = computed(() => {
  const list = cartList.value.filter((item) => result.value.includes(item.shop_id));
  const sum = list.reduce((pre, cur) => {
    return pre + cur.shop_price * cur.shop_count * 100;
  }, 0);
  return sum;
});
// 商品数量修改

const changeCount = async (value, { name }) => {
  await modifyCount({ name, value });
};
// 删除商品
const deleteShop = async (shop_id) => {
  toast("loading", "删除中...", 100000);
  await deleteCart({ shop_id });
  await getCartList();
  close();
};
// 骨架屏
const loading = computed(() => {
  return cartList.value.length > 0 ? false : true;
});
// 提交订单
const onSubmit = async () => {
  const { data } = await orderSubmit({
    arr: result.value,
  });
  localStorage.setItem("tempData", JSON.stringify(data.res));
  router.push({
    path: "/order",
  });
};
onMounted(() => {
  getCartList();
});
const checked = ref([]);
</script>
<style lang="scss">
.cart_list {
  margin: 16px 0 100px 0;
  padding-left: 16px;
  overflow-x: hidden;
}
</style>
<style>
.van-checkbox {
  width: 22px;
}

.van-swipe-cell__wrapper {
  display: flex;
}

.van-card.goods-card {
  width: calc(100% - 36px);
  background-color: #fff;
  text-align: left;
}

.delete-button {
  height: 100%;
}

.van-card__footer {
  position: absolute;
  right: 16px;
  bottom: 8px;
}

.van-card__price {
  color: red;
  font-size: 16px;
}

.submit-all {
  bottom: 50px;
}

.checkAll {
  width: 60px;
}
</style>
